﻿@{
    ViewBag.Title = "Grid Edit";
    Layout = "~/Views/Share/_Layout.cshtml";
}

@section css
{
    <link href="~/Content/web-uploader/webuploader.css" rel="stylesheet" />
}
@section scripts{
    <script src="~/Content/web-uploader/webuploader.html5only.min.js"></script>
    <script src="~/Content/grid/src/noke.grid.edit.js"></script>
    <script>
        var editData = [];
        $(function () {
            BindData();
        });
        function InitUpload() {

            //var uploader = WebUploader.create({
            //    file: { id: "uploader-demo" },
            //    auto: true, // 选完文件后，是否自动上传。                
            //    server: '/UI/UploadImages/', // 文件接收服务端。                
            //    pick: '#filePicker', // 内部根据当前运行是创建，可能是input元素，也可能是flash.                
            //    accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } // 只允许选择图片文件。
            //});
        }

        function GetGridSetting() {
            var setting = { id: "ComparePriceGrid", key: "SysNo", title: {}, cols: [], toolbar: {}, rowindex: false, data: [], supportdata: {}, editable: true };
            setting.cols.push({ key: "SysNo", type: "string", width: 50, label: "SysNo" });
            setting.cols.push({ key: "Platform", type: "string", width: 200, label: "平台", edittype: 'ddbox' });
            setting.cols.push({ key: "PlatformUrl", type: "string", width: 240, label: "平台URL", edittype:'text' });
            setting.cols.push({ key: "PlatformPrice", type: "string", width: 80, label: "价格" });
            setting.cols.push({ key: "PlatformImg", type: "image", width: 60, label: "平台图片", edittype: 'img' });
            setting.cols.push({ key: "Time", type: "string", width: 100, label: "时间" });

            setting.supportdata = { Platform: null };
            setting.supportdata.Platform = [{ value: '本来生活', key: 'Benlai' }, { value: '天天果园', key: 'FruitDay' }, { value: '两鲜网', key: 'FreshFresh' }, { value: '我买网', key: 'Womai' }, { value: '一号店', key: 'YHD' }, { value: '易果网', key: 'Yiguo' }, { value: '沱沱工社', key: 'Tootoo' }, { value: '顺丰优选', key: 'Sfbest' }, { value: '春播', key: 'Chunbo' }, { value: '喵鲜生/天猫超市', key: 'Tmall' }];

            setting.rowbind = function (i, model, args) {
                model['PlatformImg'] = 'demo/' + model.SysNo + '.png';
                //if (i == 0) {
                //    model['PlatformImg'] = '';
                //}
                model['Platform-value'] = GetPlatform(args.supportdata.Platform, model.Platform).value;
            };
            setting.save = function (model, args) {
                debugger;

                editData.push(model);
                BindEditData();
            };

            // img 
            setting.imgSavePath = 'C:\\Users\\Administrator\\Pictures\\ImageWebSite\\';
            setting.uploadServerUrl = '/UI/UploadImages/';
            setting.imgroot = 'http://localhost:7777/';
            setting.imgSize = { PlatformImg: [40, 40] };

            return setting;
        }
        function GetPlatform(data, key) {
            var pf = { key: key, value: key };
            $(data).each(function (i, item) {
                if (item.key == key)
                    pf = item;
            });
            return pf;
        }

        function BindData() {
            var setting = GetGridSetting();
            GetData(setting, function (args) {
                $('#ComparePriceGrid').grid(args);
                InitUpload()
            });
        }

        function GetData(setting, callback) {
            var data = [];
            data.push({ SysNo: 11, Platform: 'Tmall', PlatformUrl: 'http://www.tmall.com', PlatformPrice: '1235.45', Time: '2016-04-13' });
            data.push({ SysNo: 12, Platform: 'Chunbo', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });
            data.push({ SysNo: 13, Platform: 'Yiguo', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });
            data.push({ SysNo: 14, Platform: 'FreshFresh', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });
            data.push({ SysNo: 15, Platform: 'FruitDay', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });

            setting.data = data;
            callback(setting);
        }

        function GetEditGridSetting() {
            var setting = { id: "editGrid", key: "SysNo", title: {}, cols: [], toolbar: {}, rowindex: true, data: [], supportdata: {}, editable: false };
            setting.cols.push({ key: "SysNo", type: "string", width: 50, label: "SysNo" });
            setting.cols.push({ key: "Platform", type: "string", width: 80, label: "平台编号" });
            setting.cols.push({ key: "Platform-value", type: "string", width: 60, label: "平台" });
            setting.cols.push({ key: "PlatformUrl", type: "string", width: 80, label: "平台URL" });
            setting.cols.push({ key: "PlatformImg", type: "image", width: 60, label: "平台图片" });
            setting.data = editData;

            setting.rowbind = function (i, model, args) {
                model['PlatformImg'] = model['PlatformImg'] + '?t=' + i;
            };
            setting.imgroot = 'http://localhost:7777/';
            setting.imgSize = { PlatformImg: [40, 40] };
            return setting;
        }
        function BindEditData() {
            var setting = GetEditGridSetting();
            $('#editGrid').grid(setting);
        }

    </script>

}

@section head{
        
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/">UI&控件</a>
                </li>
                <li class="active">
                    <strong>Grid Edit</strong>
                </li>
            </ol>
        </div>

}

<div class="row">    
    <div class="col-lg-10">
        <div id="ComparePriceGrid"></div>
    </div>
</div>
<div class="row"> 
    <div class="col-lg-10">
        <div id="editGrid"></div>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div id="uploader-demo" class="rows"><div id="fileList" class="uploader-list"></div><div id="filePicker">选择</div></div>

        
<div class="row"> 
    <div class="col-lg-3">
        <div class="highlight">
            <pre style="background-color:#333;">
                <code class="language-html" data-lang="html">
<kbd>//********* html **********//

&lt;script src="~/Content/grid/src/noke.grid.edit.js"&gt;
    &lt;/script&gt;
                          
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"ComparePriceGrid"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span></kbd> 
                </code>
                <!-- /.code -->
            </pre>
        </div>
    </div>
    <!-- /.col-lg-3 -->
    <div class="col-lg-9">
        <div class="highlight">
            <pre style="background-color:#333;">
                <code class="language-js" data-lang="js">
<kbd>//********* javascript **********//</kbd>

<kbd>var editData = [];
        $(function () {
    BindData();
});

function GetGridSetting() {
    var setting = { id: "ComparePriceGrid", key: "SysNo", title: {}, cols: [], toolbar: {}, rowindex: true, data: [], supportdata: {}, editable: true };
    setting.cols.push({ key: "SysNo", type: "string", width: 50, label: "SysNo" });
    setting.cols.push({ key: "Platform", type: "string", width: 120, label: "平台", edittype: 'ddbox' });
    setting.cols.push({ key: "PlatformUrl", type: "string", width: 160, label: "平台URL", edittype:'text' });
    setting.cols.push({ key: "PlatformPrice", type: "string", width: 80, label: "价格" });
    setting.cols.push({ key: "Time", type: "string", width: 100, label: "时间" });

    setting.supportdata = { Platform: null };
    setting.supportdata.Platform = [{ value: '本来生活', key: 'Benlai' }
                                            , { value: '天天果园', key: 'FruitDay' }
                                            , { value: '两鲜网', key: 'FreshFresh' }
                                            , { value: '我买网', key: 'Womai' }
                                            , { value: '一号店', key: 'YHD' }
                                            , { value: '易果网', key: 'Yiguo' }
                                            , { value: '沱沱工社', key: 'Tootoo' }
                                            , { value: '顺丰优选', key: 'Sfbest' }
                                            , { value: '春播', key: 'Chunbo' }
                                            , { value: '喵鲜生/天猫超市', key: 'Tmall' }];

    setting.rowbind = function (i, model, args) {
        model['Platform-value'] = GetPlatform(args.supportdata.Platform, model.Platform).value;
    };
    setting.save = function (model, args) {
        // model = {SysNo: "11", Platform: "Tmall", Platform-value: "喵鲜生/天猫超市", PlatformUrl: "http://www.tmall.com"}
        // model 为修改后的值
        editData.push(model);
        BindEditData();
    };

    return setting;
}
function GetPlatform(data, key) {
    var pf = { key: key, value: key };
    $(data).each(function (i, item) {
        if (item.key == key)
            pf = item;
    });
    return pf;
}

function BindData() {
    var setting = GetGridSetting();
    GetData(setting, function (args) {
        $('#ComparePriceGrid').grid(args);
    });
}

function GetData(setting, callback) {
    var data = [];
    data.push({ SysNo: 11, Platform: 'Tmall', PlatformUrl: 'http://www.tmall.com', PlatformPrice: '1235.45', Time: '2016-04-13' });
    data.push({ SysNo: 12, Platform: 'Chunbo', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });
    data.push({ SysNo: 13, Platform: 'Yiguo', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });
    data.push({ SysNo: 14, Platform: 'FreshFresh', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });
    data.push({ SysNo: 15, Platform: 'FruitDay', PlatformUrl: 'http://www.tmall.com.', PlatformPrice: '1235.45', Time: '2016-04-13' });

    setting.data = data;
    callback(setting);
}</kbd>        
                </code>
                <!-- /.code -->
            </pre>
        </div>
    </div>
    <!-- /.col-lg-9 -->

</div>
<!-- /.row -->
